<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="listForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户账号" class="row-padding-bottom">
              <el-input
                v-model="filterField.account"
                placeholder="请输入专户账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="专户银行" class="row-padding-bottom">
                <el-select
                  v-model="filterField.bankId"
                  filterable
                  placeholder="请选择专户银行"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in bankOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6" v-if="payPlanType == 'MANUAL_NEED_AUDIT'">
              <el-form-item
                v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
                label="申报进度"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="filterField.auditStatus"
                  filterable
                  placeholder="请选择申报进度"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in reportProgressArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
                label="计划状态"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="filterField.enabled"
                  filterable
                  placeholder="请选择计划状态"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in planStatusArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col
            :lg="8"
            :xl="
              isShowAdd &&
              (payPlanType == 'MANUAL' || payPlanType == 'MANUAL_NEED_AUDIT') &&
              (loginType == 'builder' || loginType == 'project')
                ? 8
                : 6
            "
          >
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchTable"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <exportBtn
                v-if="
                  !(
                    isShowAdd &&
                    (payPlanType == 'MANUAL' ||
                      payPlanType == 'MANUAL_NEED_AUDIT') &&
                    (loginType == 'builder' || loginType == 'project')
                  )
                "
                :dataLen="tableList.length"
                :filterField="filterField"
                :api="api"
              ></exportBtn>
            </el-form-item>
            <!-- <el-form-item>
                            <exportBtn :dataLen="tableList.length" :filterField="filterField" :api="api"></exportBtn>
                        </el-form-item>
                         <el-form-item v-show="
                                isShowAdd &&(payPlanType == 'MANUAL' ||payPlanType == 'MANUAL_NEED_AUDIT') &&(loginType == 'builder' ||loginType == 'project')
                            ">
                        <el-button
                            type="primary"
                            class="commonBut saveBtn"
                            @click="addAllocationPlan('add')"
                            >新建拨付计划</el-button
                        >
                    </el-form-item> -->
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div
          style="margin-bottom: 24px"
          v-if="
            isShowAdd &&
            (payPlanType == 'MANUAL' || payPlanType == 'MANUAL_NEED_AUDIT') &&
            (loginType == 'builder' || loginType == 'project')
          "
        >
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            :api="api"
          ></exportBtn>
          <el-button
            type="primary"
            class="commonBut saveBtn"
            @click="addAllocationPlan('add')"
            >新建拨付计划</el-button
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="bankName"
            label="专户银行"
            :formatter="formatTd"
            min-width="140"
          />
          <el-table-column
            align="center"
            label="专户账号"
            :formatter="formatTd"
            min-width="140"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.account">{{
                scope.row.account.replace(
                  /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                  '$1**** ****$2'
                )
              }}</span>
            </template>
          </el-table-column>
          <template v-if="isHsUser() && userType == 'MONITOR'">
            <el-table-column
              align="center"
              label="计划来源"
              min-width="120"
              prop="origin"
              :formatter="formatTd"
            ></el-table-column>
          </template>
          <el-table-column
            align="center"
            prop="scale"
            sortable="custom"
            label="拨付比例"
            min-width="140"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.scale">{{ scope.row.scale }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="disburseCycleTypeDesc"
            label="拨付周期"
            :formatter="formatTd"
            min-width="120"
          />
          <el-table-column
            align="center"
            prop="shouldDisburseTotal"
            label="应拨付总额(万元)"
            sortable="custom"
            :formatter="formatTd"
            min-width="180"
          />
          <el-table-column
            align="center"
            prop="realDisburseTotal"
            label="已拨付总额(万元)"
            sortable="custom"
            min-width="180"
            :formatter="formatTd"
          />
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            prop="pbName"
            label="创建方"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            prop="pcName"
            label="审核方"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pcName"
                :columnName="'pcName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            align="center"
            prop="updateTime"
            label="创建/修改时间"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            align="center"
            prop="auditTime"
            label="审核时间"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            align="center"
            prop="auditStatusDesc"
            label="申报进度"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            align="center"
            prop="enabledDesc"
            label="计划状态"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <el-table-column
            v-if="payPlanType == 'MANUAL_NEED_AUDIT'"
            label="驳回原因"
            :formatter="formatTd"
            :show-overflow-tooltip="true"
            min-width="230"
          >
            <template slot-scope="scope"
              >{{
                scope.row.auditStatus === 'REJECTED'
                  ? scope.row.rejectReason
                  : '--'
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="操作"
            fixed="right"
            min-width="175px"
          >
            <template slot-scope="scope">
              <el-link
                v-if="isShowDetail && detailPlanBtn(scope.row.auditStatus)"
                type="primary"
                @click="toDetail(scope.row.id, 'detail')"
                >查看计划</el-link
              >
              <el-link
                type="primary"
                v-if="isShowUpdate && editPlanBtn(scope.row.auditStatus)"
                @click="addAllocationPlan('update', scope.row.id)"
                >修改计划</el-link
              >
              <!-- 黄石定制需求-监察端-start -->
              <el-link
                type="primary"
                v-if="
                  userType == 'MONITOR' &&
                  isHsUser() &&
                  scope.row.createType == 'AUTO'
                "
                @click="addAllocationPlan('update', scope.row.id)"
                >修改计划</el-link
              >
              <el-link
                type="primary"
                v-if="
                  userType == 'MONITOR' &&
                  isHsUser() &&
                  scope.row.updateFlag == '1'
                "
                @click="resetPlan(scope.row.id)"
                >重置计划</el-link
              >
              <!-- 黄石定制需求-监察端-end -->
              <el-link
                type="primary"
                v-if="isShowUpdate && abolishPlanBtn(scope.row.auditStatus)"
                @click="abolishDialog(scope.row.id)"
                >作废</el-link
              >
              <el-link
                type="primary"
                v-if="isShowUpdate && auditPlanBtn(scope.row.auditStatus)"
                @click="toDetail(scope.row.id, 'audit')"
                >审核</el-link
              >
              <span
                v-if="
                  !(
                    detailPlanBtn(scope.row.auditStatus) ||
                    editPlanBtn(scope.row.auditStatus) ||
                    abolishPlanBtn(scope.row.auditStatus) ||
                    auditPlanBtn(scope.row.auditStatus)
                  )
                "
                >--</span
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isEmpty">
            <emptyTable emptyText="暂无相关信息" />
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        />
      </div>
      <!-- <el-dialog
                title="提示"
                :visible.sync="delDialogVisible"
                width="30%"
                center
                :close-on-press-escape="false"
                :close-on-click-modal="false"
            >
                <span
                    >作废计划后系统会提示未创建计划预警，请确认是否作废该计划？</span
                >
                <span slot="footer" class="dialog-footer">
                    <el-button class="btn cancel" @click="delDialogVisible = false"
                        >取 消</el-button
                    >
                    <el-button type="primary" class="btn save" @click="abolishAllocationPlan"
                        >确 定</el-button
                    >
                </span>
            </el-dialog> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'allocationPlanList',
  props: ['message'],
  data() {
    return {
      hiddleToolBar: false,
      tableHeight: null,
      loginType: '', //监察monitor施工方bulider/建设方constructor/项目project
      advanced: false,
      requestUrl: '',
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectName: '',
        account: '',
        bankId: '',
        auditStatus: '',
        enabled: '',
      },
      pageSize: 20,
      pageNo: 1,
      tableList: [],
      loading: false,
      isEmpty: false,
      bankOptions: [], //专户银行
      reportProgressArr: [
        //申报进度
        {
          label: '待审核',
          value: 'WAIT_AUDIT',
        },
        {
          label: '已通过',
          value: 'PASSED',
        },
        {
          label: '已驳回',
          value: 'REJECTED',
        },
        {
          label: '待作废',
          value: 'WAIT_ABOLISH',
        },
        {
          label: '已作废',
          value: 'ABOLISHED',
        },
      ],
      planStatusArr: [
        //计划状态
        {
          label: '正常',
          value: 'NORMAL',
        },
        {
          label: '作废',
          value: 'ABOLISHED',
        },
      ],
      payPlanType: '', //系统配置项拨付计划方式
      delDialogVisible: false, //作废计划二次确认
      planId: '', //计划id
      isShowDetail: '',
      isShowUpdate: '',
      isShowAdd: '',
      api: '',
      userType: '',
    }
  },
  async created() {
    this.userType = this.$store.state.userType
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('accountList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListJSF:detail') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('accountList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListSGF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListJSF:update') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('accountList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListSGF:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListJSF:add') > -1
    this.requestUrl = 'api-acc/cs/disburseaudit/expand/listbycompany'
    if (this.$store.state.userType === 'COMPANY') {
      if (localStorage.getItem('judgeRoleCode') == 'constructor') {
        this.loginType = 'builder' //施工方
      } else if (localStorage.getItem('judgeRoleCode') == 'owner') {
        this.loginType = 'constructor' //建设方
      }
    } else if (
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType == 'LABOR_ADMINISTRATOR'
    ) {
      this.loginType = 'project' //项目
    } else if (this.$store.state.userType === 'MONITOR') {
      this.loginType = 'monitor' //监察
      this.isShowUpdate = ''
      this.isShowAdd = ''
      this.requestUrl = 'api-acc/cs/disburseaudit/expand/listbymonitor'
    }
    this.getBank() //获取专户银行
    await this.disbursesetup() //拨付生成方式系统配置
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getApi()
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 236

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 查看按钮
    detailPlanBtn(auditStatus) {
      if (
        this.payPlanType == 'AUTO' ||
        this.payPlanType == 'MANUAL' ||
        this.loginType == 'monitor'
      ) {
        return true
      } else {
        if (
          ((this.loginType == 'builder' || this.loginType == 'project') &&
            auditStatus != 'REJECTED' &&
            auditStatus != 'WAIT_AUDIT') ||
          (this.loginType == 'constructor' &&
            auditStatus != 'WAIT_ABOLISH' &&
            auditStatus != 'WAIT_AUDIT')
        ) {
          return true
        } else {
          return false
        }
      }
    },
    // 修改按钮
    editPlanBtn(auditStatus) {
      if (
        (this.loginType == 'builder' || this.loginType == 'project') &&
        (this.payPlanType == 'MANUAL' ||
          (this.payPlanType == 'MANUAL_NEED_AUDIT' &&
            (auditStatus == 'REJECTED' || auditStatus == 'WAIT_AUDIT')))
      ) {
        return true
      } else {
        return false
      }
    },
    // 作废按钮
    abolishPlanBtn(auditStatus) {
      if (
        (this.loginType == 'builder' || this.loginType == 'project') &&
        this.payPlanType == 'MANUAL_NEED_AUDIT' &&
        auditStatus == 'PASSED'
      ) {
        return true
      } else {
        return false
      }
    },
    // 审核按钮
    auditPlanBtn(auditStatus) {
      if (
        this.payPlanType == 'MANUAL_NEED_AUDIT' &&
        this.loginType == 'constructor' &&
        (auditStatus == 'WAIT_ABOLISH' || auditStatus == 'WAIT_AUDIT')
      ) {
        return true
      } else {
        return false
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isEmpty = true
      }
    },
    //获取拨付生成方式系统配置
    disbursesetup() {
      return this.axios({
        method: 'get',
        url: 'api-acc/cs/disbursesetup/expand/get',
      })
        .then((response) => {
          this.payPlanType = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    // 查看/审核计划
    toDetail(id, type) {
      this.$router.push({
        path: '/home/separateAccountManagement/allocationPlanDetail',
        name: 'allocationPlanDetail',
        query: {
          disbursePlanId: id,
          type,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 作废计划二次确认
    abolishDialog(id) {
      // this.delDialogVisible = true;
      this.planId = id
      this.$confirm(
        '作废计划后系统会提示未创建计划预警，请确认是否作废该计划？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.abolishAllocationPlan()
          // this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          // });
        })
        .catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          // });
        })
    },
    // 作废计划
    abolishAllocationPlan() {
      this.axios({
        method: 'post',
        url: 'api-acc/cs/disburseaudit/expand/updateDisbursePlanAudit',
        data: {
          id: this.planId,
          auditStatus: 'WAIT_ABOLISH',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.delDialogVisible = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 新建/修改计划
    addAllocationPlan(type, id) {
      this.$router.push({
        path: '/home/separateAccountManagement/setAllocationPlan',
        name: 'setAllocationPlan',
        query: {
          type,
          id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    // 搜索列表
    searchTable() {
      // this.loading = true;
      this.$refs.pagination.getTableListData()
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    // 自定义动态表头列宽
    flexColumnWidth(str) {
      let flexWidth = 0
      for (const char of str) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 8
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配20个单位宽度
          flexWidth += 20
        } else {
          // 其他种类字符，为字符分配5个单位宽度
          flexWidth += 5
        }
      }
      if (flexWidth < 50) {
        // 设置最小宽度
        flexWidth = 200
      }
      if (flexWidth > 250) {
        // 设置最大宽度
        flexWidth = 250
      }
      return flexWidth + 'px'
    },
    getApi() {
      let loginType = localStorage.getItem('loginType')
      if (loginType === 'QY') {
        this.api = 'api-s/report/export_QY_ACCOUNT_PAY_PLAN'
      } else {
        this.api = 'api-s/report/export_XM_ACCOUNT_PAY_PLAN'
      }
    },
    // 黄石定制需求重置计划
    resetPlan(id) {
      this.$confirm('是否重置计划?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'post',
            url: 'api-acc/cs/disburseaudit/expand/reset',
            data: { disbursePlanId: id },
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message.success('重置成功')
                this.$nextTick(function () {
                  this.$refs.pagination.getTableListData()
                })
              }
            })
            .catch((error) => {
              this.$message.error('重置失败')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 82px;
  }
}
.form-item {
  width: 300px;
}
.mainCon {
  // position: absolute;
  /* top: 146px; */
  // top: 198px;
  // left: 24px;
  // right: 24px;
  // bottom: 24px;
  // overflow-y: auto;
  background: #fff;
  // padding: 24px;
  padding: 0;
}
@import '../../../static/css/filterArea.less';
</style>
